<template>
    <section id="complete" class="py-16 bg-gray-50">
        <div class="container mx-auto px-4">
            <!-- 标题 -->
            <div class="text-center mb-14" style="text-align: center;margin-top: 0;">
                <h2 class="text-[clamp(2rem,4vw,3rem)] font-extrabold mb-3 text-primary" style="font-size: 30px;">完成组队
                </h2>
                <p class="text-gray-400 max-w-2xl mx-auto text-lg">加入小组后，你可以使用这些功能来管理和参与学习</p>
            </div>

            <!-- 我的小组 -->
            <div class="mb-14" style="margin-bottom: 50px; width: 1200px;">
                <h3 class="text-xl font-bold mb-6" style="font-size: 20px;font-weight: bold;">我的小组</h3>
                <a-row :gutter="24">
                    <a-col :xs="24" :md="12">
                        <a-card hoverable
                            class="transition-all transform hover:-translate-y-1 rounded-2xl shadow-xl p-6">
                            <template #title>
                                <div
                                    style="display: flex;justify-content: space-between;border-bottom: 1px solid #e7eeff;">
                                    <div class="flex justify-between items-center">
                                        <span class="font-semibold text-lg">Web前端开发学习小组</span>
                                        <div class="text-gray-500 mb-4 text-base" style="font-size: 16px;color: #666;">
                                            JavaScript / Vue / React</div>
                                    </div>
                                    <a-tag color="success" class="rounded-full px-4 py-1 text-base">已加入</a-tag>
                                </div>
                            </template>

                            <div class="flex justify-between items-center mb-4"
                                style="display: flex;justify-content: space-between;">
                                <div>
                                    <span class="text-gray-400">小组进度：</span>
                                    <span class="font-bold text-lg">68%</span>
                                </div>
                                <div class="flex items-center" style="display: flex;align-items: center;">
                                    <span class="text-gray-400 mr-2">成员：</span>
                                    <div class="flex -space-x-3">
                                        <!-- 成员头像 -->
                                        <img src="https://picsum.photos/id/1001/40/40" alt="成员"
                                            class="w-10 h-10 rounded-full border-4 border-white shadow">
                                        <img src="https://picsum.photos/id/1002/40/40" alt="成员"
                                            class="w-10 h-10 rounded-full border-4 border-white shadow">
                                        <img src="https://picsum.photos/id/1003/40/40" alt="成员"
                                            class="w-10 h-10 rounded-full border-4 border-white shadow">
                                        <div
                                            class="w-10 h-10 rounded-full border-4 border-white bg-gray-100 flex items-center justify-center text-xs font-semibold shadow">
                                            +2</div>
                                    </div>
                                </div>
                            </div>
                            <a-progress :percent="68" strokeColor="#165DFF" class="mb-4"></a-progress>
                            <div class="grid grid-cols-3 gap-3">
                                <a-button type="link" class="text-primary font-semibold hover:bg-primary/10 rounded-full"><i
                                        class="fa fa-book mr-1"></i>
                                    学习笔记</a-button>
                                <a-button type="link" class="text-primary font-semibold hover:bg-primary/10 rounded-full"><i
                                        class="fa fa-question-circle mr-1"></i> 问答讨论</a-button>
                                <a-button type="link" class="text-primary font-semibold hover:bg-primary/10 rounded-full"><i
                                        class="fa fa-gamepad mr-1"></i> 学习游戏</a-button>
                            </div>
                        </a-card>
                    </a-col>
                </a-row>
            </div>

            <!-- 小组功能卡片 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"
                style="display: flex;justify-content: space-between;">
                <!-- 小组学习进度 -->
                <a-card hoverable
                    class="card-unify transition-all transform hover:-translate-y-1 rounded-2xl shadow-xl p-6"
                    style="height: 420px;width: 300px;">
                    <template #title>
                        <div class="flex items-start">
                            <div
                                class="w-12 h-12 icon-circle icon-blue flex items-center justify-center text-primary text-2xl shadow">
                                <i class="fa fa-line-chart"></i>
                            </div>
                            <div class="ml-4">
                                <h3 class="text-lg font-bold">小组学习进度</h3>
                                <p class="text-gray-500 text-sm">查看和管理小组整体及成员个人学习进度</p>
                            </div>
                        </div>
                    </template>
                    <div class="flex-1 flex flex-col mb-3">
                        <canvas id="progressChart" width="400" height="200"></canvas>
                    </div>
                    <a-button class="w-full mt-auto rounded-full text-primary btn-blue" ghost>查看详情</a-button>
                </a-card>

                <!-- 小组学习笔记 -->
                <a-card hoverable
                    class="card-unify transition-all transform hover:-translate-y-1 rounded-2xl shadow-xl p-6"
                    style="height: 420px;width: 300px;">
                    <template #title>
                        <div class="flex items-start">
                            <div
                                class="w-12 h-12 icon-circle icon-purple flex items-center justify-center text-secondary text-2xl shadow">
                                <i class="fa fa-file-text-o"></i>
                            </div>
                            <div class="ml-4">
                                <h3 class="text-lg font-bold">小组学习笔记</h3>
                                <p class="text-gray-500 text-sm">上传、编辑和共享学习笔记，共同进步</p>
                            </div>
                        </div>
                    </template>
                    <div class="flex-1 flex flex-col space-y-3 mb-3">
                        <a-card class="box-card rounded-xl border border-gray-100" style="height: 100px;">
                            <template #title>
                                <div class="card-header">
                                    <span>Vue3组件开发技巧</span>
                                </div>
                            </template>
                            <div class="text item">张三 · 2小时前</div>
                        </a-card>
                        <a-card class="box-card rounded-xl border border-gray-100">
                            <template #title>
                                <div class="card-header">
                                    <span>React Hooks使用指南</span>
                                </div>
                            </template>
                            <div class="text item">李四 · 昨天</div>
                        </a-card>
                    </div>
                    <a-button class="w-full mt-auto rounded-full text-secondary btn-purple" ghost>查看全部笔记</a-button>
                </a-card>

                <!-- 小组学习问答 -->
                <a-card hoverable
                    class="card-unify transition-all transform hover:-translate-y-1 rounded-2xl shadow-xl p-6"
                    style="height: 420px;width: 300px;">
                    <template #title>
                        <div class="flex items-start">
                            <div
                                class="w-12 h-12 icon-circle icon-green flex items-center justify-center text-success text-2xl shadow">
                                <i class="fa fa-comments-o"></i>
                            </div>
                            <div class="ml-4">
                                <h3 class="text-lg font-bold">小组学习问答</h3>
                                <p class="text-gray-500 text-sm">发布问题、回答问题，共同解决学习中遇到的难题</p>
                            </div>
                        </div>
                    </template>
                    <div class="flex-1 flex flex-col space-y-3 mb-3">
                        <a-card class="box-card rounded-xl border border-gray-100">
                            <template #title>
                                <div class="card-header">
                                    <span>如何优化React应用的性能？</span>
                                </div>
                            </template>
                            <div class="text item flex items-center space-x-2">
                                <a-tag color="warning" class="rounded-full px-3" size="small">待解答</a-tag>
                                <span>王五 · 3小时前</span>
                            </div>
                        </a-card>
                        <a-card class="box-card rounded-xl border border-gray-100">
                            <template #title>
                                <div class="card-header">
                                    <span>Vuex和Pinia的区别是什么？</span>
                                </div>
                            </template>
                            <div class="text item flex items-center space-x-2">
                                <a-tag color="success" class="rounded-full px-3" size="small">已解答</a-tag>
                                <span>赵六 · 昨天</span>
                            </div>
                        </a-card>
                    </div>
                    <a-button class="w-full mt-auto rounded-full text-success btn-green" ghost>进入问答区</a-button>
                </a-card>

                <!-- 小组学习邀请 -->
                <a-card hoverable
                    class="card-unify transition-all transform hover:-translate-y-1 rounded-2xl shadow-xl p-6"
                    style="height: 420px;width: 300px;">
                    <template #title>
                        <div class="flex items-start">
                            <div
                                class="w-12 h-12 icon-circle icon-orange flex items-center justify-center text-warning text-2xl shadow">
                                <i class="fa fa-share-alt"></i>
                            </div>
                            <div class="ml-4">
                                <h3 class="text-lg font-bold">小组学习邀请</h3>
                                <p class="text-gray-500 text-sm">邀请好友加入小组，分享邀请口令</p>
                            </div>
                        </div>
                    </template>
                    <div class="flex-1 flex flex-col text-center mb-4" style="text-align: center;">
                        <div class="bg-gray-100 p-3 rounded-xl inline-block shadow">
                            <div class="font-bold text-2xl mb-1 tracking-widest">ABCD-1234</div>
                            <div class="text-sm text-gray-500">邀请口令</div>
                        </div>
                    </div>
                    <div class="flex space-x-2 mb-3 justify-center"
                        style="display: flex;justify-content: center; margin-top: 30px;">
                        <a-button ghost class="rounded-full px-4 text-warning btn-orange"><i
                                class="fa fa-copy mr-1"></i>
                            复制口令</a-button>
                        <a-button ghost class="rounded-full px-4 text-warning btn-orange"><i
                                class="fa fa-share-alt mr-1"></i>
                            分享</a-button>
                    </div>
                    <div class="flex items-center justify-between mt-auto" style="margin-top: 30px;text-align: right;">
                        <span class="text-gray-500">开放状态：</span>
                        <a-switch v-model:checked="inviteStatus" />
                    </div>
                </a-card>
            </div>
        </div>
    </section>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import Chart from 'chart.js/auto';
import { Row, Col, Card, Tag, Progress, Button, Switch, message } from 'ant-design-vue';

// 用户信息相关 - 直接在组件中实现
const userInfo = ref(null);

// 检查用户登录状态
const checkUserLogin = () => {
  try {
    const storedUserInfo = localStorage.getItem('userInfo')
    if (storedUserInfo) {
      const userInfo = JSON.parse(storedUserInfo)
      console.log('TeamsSection - 当前登录用户信息:', userInfo)
      return userInfo
    } else {
      console.log('TeamsSection - 用户未登录')
      return null
    }
  } catch (error) {
    console.error('检查用户登录状态失败:', error)
    return null
  }
}

// 获取当前用户ID - 等效于 StpUtil.getLoginIdAsInt()
const getLoginIdAsInt = () => {
  const userInfo = checkUserLogin()
  if (userInfo && userInfo.userId) {
    return parseInt(userInfo.userId)
  }
  return null
}

// 获取当前用户ID
const getCurrentUserId = () => {
  const userInfo = checkUserLogin()
  if (userInfo && userInfo.userId) {
    return userInfo.userId
  }
  return null
}

// 状态变量
const progressColor = ref('#165DFF');
const inviteStatus = ref(true);

// 小组相关方法
const goToDiscussion = (teamId) => {
  const userId = getLoginIdAsInt();
  if (!userId) {
    message.warning('请先登录后再进入讨论区');
    return;
  }
  
  console.log(`用户ID ${userId} 进入小组讨论区，小组ID: ${teamId}`);
  // 这里可以添加跳转到讨论区的逻辑
};

const acceptInvitation = (teamId) => {
  const userId = getLoginIdAsInt();
  if (!userId) {
    message.warning('请先登录后再接受邀请');
    return;
  }
  
  console.log(`用户ID ${userId} 接受小组邀请，小组ID: ${teamId}`);
  message.success('已接受邀请，欢迎加入小组！');
};

const rejectInvitation = (teamId) => {
  const userId = getLoginIdAsInt();
  if (!userId) {
    message.warning('请先登录后再拒绝邀请');
    return;
  }
  
  console.log(`用户ID ${userId} 拒绝小组邀请，小组ID: ${teamId}`);
  message.info('已拒绝邀请');
};

const switchTeam = (teamId) => {
  const userId = getLoginIdAsInt();
  if (!userId) {
    message.warning('请先登录后再切换小组');
    return;
  }
  
  console.log(`用户ID ${userId} 切换到小组，小组ID: ${teamId}`);
  message.success('已切换到新小组');
};

const joinNewTeam = () => {
  const userId = getLoginIdAsInt();
  if (!userId) {
    message.warning('请先登录后再加入新小组');
    return;
  }
  
  console.log(`用户ID ${userId} 请求加入新小组`);
  // 这里可以添加跳转到组队大厅的逻辑
};

// 生命周期钩子
onMounted(() => {
  // 检查用户登录状态
  userInfo.value = checkUserLogin();
  
  // 初始化进度图表
  const ctx = document.getElementById('progressChart');
  if (ctx) {
    new Chart(ctx.getContext('2d'), {
      type: 'bar',
      data: {
        labels: ['张三', '李四', '王五', '赵六', '平均'],
        datasets: [{
          label: '学习进度',
          data: [75, 82, 65, 90, 78],
          backgroundColor: [
            'rgba(22, 93, 255, 0.7)',
            'rgba(114, 46, 209, 0.7)',
            'rgba(0, 180, 42, 0.7)',
            'rgba(255, 125, 0, 0.7)',
            'rgba(22, 93, 255, 0.4)'
          ],
          borderColor: [
            'rgba(22, 93, 255, 1)',
            'rgba(114, 46, 209, 1)',
            'rgba(0, 180, 42, 1)',
            'rgba(255, 125, 0, 1)',
            'rgba(22, 93, 255, 0.7)'
          ],
          borderWidth: 1
        }]
      },
      options: {
        responsive: true,
        scales: {
          y: {
            beginAtZero: true,
            max: 100
          }
        }
      }
    });
  }
});
</script>

<style scoped>
:root {
    --primary: #165DFF;
    --secondary: #722ED1;
    --success: #00B42A;
    --warning: #FF7D00;
    --dark: #2c3e50;
    --card-radius: 24px;
    --card-shadow: 0 8px 32px rgba(22, 93, 255, 0.08), 0 1.5px 4px rgba(0, 0, 0, 0.04);
}

:deep(.el-card) {
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.3s, transform 0.3s;
    background: #fff;
}

:deep(.el-card:hover) {
    box-shadow: 0 16px 40px rgba(22, 93, 255, 0.12), 0 3px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(-6px) scale(1.02);
}

:deep(.el-button) {
    border-radius: 999px;
    font-size: 1rem;
    padding: 0.75em 2em;
}

:deep(.el-input__inner),
:deep(.el-select),
:deep(.el-radio-group) {
    border-radius: 999px;
    min-height: 44px;
    font-size: 1rem;
}

.section-title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: bold;
    margin-bottom: 1.5rem;
    color: var(--primary);
    letter-spacing: 1px;
}

.section-subtitle {
    font-size: 1.25rem;
    color: #666;
    margin-bottom: 2.5rem;
    opacity: 0.85;
}

.bg-section {
    background: linear-gradient(135deg, #f8faff 0%, #f3f0ff 100%);
    border-radius: 2rem;
    padding: 3rem 2rem;
    margin-bottom: 2.5rem;
}

:deep(.el-card__header) {
    background-color: transparent;
    padding: 20px;
    border-bottom: none;
}

:deep(.el-card__body) {
    padding: 20px;
}

:deep(.el-progress-bar__inner) {
    background-color: var(--primary) !important;
}

.box-card {
    width: 100%;
    border: 1px solid #f0f0f0;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.box-card .item {
    color: #99a9bf;
}

.box-card .box-item {
    color: #606c71;
}

:deep(.el-card) {
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.3s, transform 0.3s;
    background: #fff;
}

:deep(.el-card:hover) {
    box-shadow: 0 16px 40px rgba(22, 93, 255, 0.12), 0 3px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(-6px) scale(1.02);
}

:deep(.el-button) {
    border-radius: 999px;
    font-size: 1rem;
    padding: 0.75em 2em;
}

:deep(.el-input__inner),
:deep(.el-select),
:deep(.el-radio-group) {
    border-radius: 999px;
    min-height: 44px;
    font-size: 1rem;
}

.section-title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: bold;
    margin-bottom: 1.5rem;
    color: var(--primary);
    letter-spacing: 1px;
}

.section-subtitle {
    font-size: 1.25rem;
    color: #666;
    margin-bottom: 2.5rem;
    opacity: 0.85;
}

.bg-section {
    background: linear-gradient(135deg, #f8faff 0%, #f3f0ff 100%);
    border-radius: 2rem;
    padding: 3rem 2rem;
    margin-bottom: 2.5rem;
}

.card-unify {
    min-height: 420px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.container {
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

.icon-circle {
    border-radius: 50%;
    background: #f0f6ff;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(22, 93, 255, 0.08);
}

.icon-blue {
    background: #eaf4ff;
}

.icon-purple {
    background: #f3eaff;
}

.icon-green {
    background: #eafff3;
}

.icon-orange {
    background: #fff7ea;
}

.btn-blue {
    color: #165DFF !important;
    border-color: #b3d8ff !important;
    background: #eaf4ff !important;
}

.btn-purple {
    color: #722ED1 !important;
    border-color: #d3b3ff !important;
    background: #f3eaff !important;
}

.btn-green {
    color: #00B42A !important;
    border-color: #b3ffd8 !important;
    background: #eafff3 !important;
}

.btn-orange {
    color: #FF7D00 !important;
    border-color: #ffdcb3 !important;
    background: #fff7ea !important;
}
</style>